(function(){
    var valo = $("#area").attr("areaid");
	$('#area').scroller('destroy').scroller({ preset: 'area', theme: 'android-ics light', display: 'top',valueo:valo });
	var obj={};
	obj.ajax=function(type,url,data,headers,context,callback){
		$.ajax({type:type,url:url,data:JSON.stringify(data),headers:headers,context:context})
		.done(callback);
	};
	window.j=obj;
})();
    
    
function DeliverComponent(template){
	this.model=null;
	this.template=template;
	this.addDeliver=function(deliver){
		j.ajax("POST","addDeliver",deliver,{"Content-Type":"application/json"},this,function(deliver){
			this.model.push(deliver);
			_render(this.model);
		});
	};
    
	this.updateDeliver=function(deliver){
		j.ajax("PUT","updateDeliver",deliver,{"Content-Type":"application/json"},this,function(deliver){
			for (var i = 0; i < this.model.length; i++) {
				var d = this.model[i];
				if (d.did == deliver.did) {
					this.model.splice(i, 1);
					this.model.splice(i, 0, deliver);
				}
			}
			console.log(this.model);
			_render(this.model);
			$('#myModal').modal('hide');
		});
	};
	
	this.findAllDeliver=function(){
		j.ajax("GET","allDeliver",null,null,this,function(delivers){
			this.model=delivers;
			_render(this.model);
		});
	};
	
    
	function _render(data){
		template.empty();
		$(data).each(function(index,item){
            var tr=$("<tr></tr>");
            $("<td class='contactClass'>"+item.contact+"</td>").appendTo(tr);
            $("<td class='telClass'>"+item.tel+"</td>").appendTo(tr);
            $("<td class='addrClass'>"+item.addr+"</td>").appendTo(tr);
            $("<td>").append($("<button>").attr("class","btn").attr("class","btn-info").text("update").data(item)).appendTo(tr);
            $("<td>").append($("<button>").attr("class","btn").attr("class","btn-danger").text("delete").data(item)).appendTo(tr);
            tr.appendTo(template);
		});
		
		
		$("button:contains(delete)").on("click",function(){	
			$this=$(this);
			j.ajax("DELETE","delDeliver?did="+$this.data().did,null,null,this,function(m){
				data=data.filter(function(item){
					return item.did!=$this.data().did;
				});
				_render(data);
			});
		});
		
		$("button:contains(update)").on("click",function(){	
			$this = $(this);
			var json = $this.data();
			$("input[name=didform]").val(json.did);
			$("input[name=contactform]").val(json.contact);
			$("input[name=telform]").val(json.tel);
			$("input[name=addrform]").val(json.addr);
			$('#myModal').modal('show');
		});
	}
	
}    
   
    
    
$(function(){
	var c=new DeliverComponent($("#deliv_info_table"));
    c.findAllDeliver();
    $("#addAdressBtn").on("click",function(){
    	var area = $("#area").val();
    	var subAddress = $("#subAddress").val();
    	var totalAdddress = area+" "+subAddress;
    	var contact = $("#contact").val();
    	var tel = $("#tel").val();
    	var deliver={"contact":contact,"addr":totalAdddress,"tel":tel};
    	c.addDeliver(deliver);
    });
    $("#modalBtn").on("click", function() {
    	var did = $("input[name=didform]").val();
    	var contact = $("input[name=contactform").val();
    	var addr = $("input[name=addrform]").val();
    	var tel = $("input[name=telform]").val();
    	var updateAddr = {
    			did : did,
    			contact : contact,
    			client:{},
    			addr : addr,
    			tel : tel
    		};
		c.updateDeliver(updateAddr);
	})
});
